<template>
  <div class="container">
    <div class="app-container">
      <!-- 左侧树区域 -->
      <div class="left-container">
        <!-- 搜索区域 -->
        <el-input
          v-model="queryParams.keyword"
          type="text"
          placeholder="输入员工姓名搜索"
          size="small"
          style="margin-bottom: 10px"
          prefix-icon="el-icon-search"
          @input="changeValue"
        ></el-input>
        <!-- 树形结构列表区域 -->
        <el-tree
          ref="deptTreeRef"
          node-key="id"
          :data="depts"
          :props="defaultProps"
          default-extend-all
          :expand-on-click-node="false"
          highlight-current
          @current-change="selectNode"
        >
        </el-tree>
      </div>

      <!-- 右侧表格区域 -->
      <div class="right-container">
        <!-- 操作按钮区域 -->
        <el-row type="flex" justify="end" class="operate-tools">
          <el-button size="mini" type="primary" @click="addEmployeeBtn">添加员工</el-button>
          <el-button v-permission="'add-employee'" size="mini" type="primary" @click="addEmployeeBtn"
            >添加员工</el-button
          >
          <el-button size="mini" @click="showExcelDialog = true">excel导入</el-button>
          <el-button size="mini" @click="exportEmployee">excel导出</el-button>
        </el-row>
        <!-- 表格区域 -->
        <el-table :data="employeeList">
          <el-table-column label="头像" align="center">
            <template v-slot="{ row }">
              <el-avatar v-if="row.staffPhoto" :size="30" :src="row.staffPhoto"></el-avatar>
              <span v-else class="username">{{ row.username.charAt(0) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="姓名" align="center"></el-table-column>
          <el-table-column prop="mobile" label="手机号" align="center" sortable></el-table-column>
          <el-table-column prop="workNumber" label="工号" align="center" sortable></el-table-column>
          <!-- 1正式, 2非正式 -->
          <el-table-column prop="formOfEmployment" :formatter="formaStatus" label="聘用形式" align="center">
            <!-- 两种适配状态数据 一种使用formatter属性创建一个方法过滤值模式 或 模板插槽模式
            <template v-slot="{ row }">
              <span v-if="row.formOfEmployment === 1">正式</span>
              <span v-else-if="row.formOfEmployment === 2">非正式</span>
              <span v-else>无</span>
            </template> -->
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" align="center"></el-table-column>
          <el-table-column prop="timeOfEntry" label="入职时间" align="center" sortable></el-table-column>
          <el-table-column label="操作" align="center">
            <template v-slot="{ row }">
              <el-button type="text" size="mini" @click="$router.push(`/employee/detail/${row.id}`)"
                >查看</el-button
              >
              <el-button type="text" size="mini" @click="btnRole(row.id)">角色</el-button>
              <el-popconfirm title="确认删除该行数据吗?" @onconfirm="confirmDel(row.id)">
                <el-button slot="reference" type="text" size="mini" style="margin-left: 10px"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-row type="flex" justify="end" style="height: 60px" align="middle">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="queryParams.page"
            :page-size="queryParams.pageSize"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
    <!-- excel导入组件 -->
    <import-excel :show-excel-dialog.sync="showExcelDialog" @uploadSuccess="getEmployeeList" />

    <!-- 对话框弹窗组件 -->
    <el-dialog :visible.sync="showRoleDialog" title="分配角色">
      <!-- 弹层内容 -->
      <!-- checkbox -->
      <el-checkbox-group v-model="roleIds">
        <!-- 放置n个的checkbox  要执行checkbox的存储值 item.id-->
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <!-- 确定和取消按钮 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="mini" @click="btnRoleOk">确定</el-button>
          <el-button size="mini" @click="showRoleDialog = false">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getDepartment } from '@/api/deparment.js'
import { getEmployeeList, DelEmployeeData, getEmployeeDetailData, exportEmployee } from '@/api/employee.js'
import { getEnableRoleList, assignRole } from '@/api/role.js'
import FileSaver from 'file-saver'
import { tranListToTreeData } from '@/utils'
import ImportExcel from './components/import-excel.vue'
export default {
  name: 'Employee',
  components: {
    ImportExcel
  },
  data() {
    return {
      depts: [], //组织部门数据
      defaultProps: {
        //树形控件的配置项
        label: 'name',
        children: 'children'
      },
      //存储查询参数 => 部门id
      //部门id为什么要放在queryParams中，因为后面的查询会有很多查询条件，到时候查询条件都会聚合到一起，所以使用一个公共的对象来管理更方便和合适
      queryParams: {
        departmentId: null, //部门id 默认为null 因为初始化的时候还没有选中节点 所以默认为空
        page: 1,
        pageSize: 10,
        keyword: '' //搜索关键字
      },
      employeeList: [], //员工列表数据
      total: 0, //员工列表总数
      showRoleDialog: false, //角色对话框显示隐藏
      roleList: [], //角色复选框列表
      roleIds: [], //角色id列表 双向绑定
      currentUserId: null, //记录当前点击用户id
      showExcelDialog: false // 控制excel的弹层显示和隐藏
    }
  },
  created() {
    this.getDepartment()
    this.getEmployeeList()
  },
  methods: {
    //获取部门数据
    async getDepartment() {
      this.depts = tranListToTreeData(await getDepartment(), 0)
      // console.log(this.depts, '部门数据')
      //初始化选中首个节点 =>记录节点 =>选中节点 =>查询对应节点的部门员工
      this.queryParams.departmentId = this.depts[0].id //
      // 树组件渲染是异步的 等到DOM模板更新完毕 之后再执行下面的代码
      this.$nextTick(() => {
        //setCurrentKey() 通过 key 设置某个节点的当前选中状态，该方法会触发节点选中事件。
        this.$refs.deptTreeRef.setCurrentKey(this.queryParams.departmentId) //设置默认选中节点的key
        //首次加载 =>根据查询参数获取员工列表
        // 这个时候之前记录了所需查询参数部门id
        this.getEmployeeList()
      })
    },
    //树组件切换部门节点事件
    selectNode(node) {
      //切换节点再次记录节点id
      this.queryParams.departmentId = node.id // 重新记录了参数
      this.queryParams.page = 1 //设置第一页 =>重新获取员工列表
      this.getEmployeeList() //=>选中节点改变 重新获取对应部门员工列表
    },
    //获取员工列表
    async getEmployeeList() {
      const { total, rows } = await getEmployeeList(this.queryParams)
      this.employeeList = rows
      this.total = total
    },
    //格式化聘用形式
    formaStatus(row) {
      const MAP = {
        1: '正式',
        2: '非正式'
      }
      return MAP[row.formOfEmployment]
    },
    //当前页码改变
    handleCurrentChange(newPage) {
      this.queryParams.page = newPage
      this.getEmployeeList()
    },
    //搜索框输入值变化事件
    changeValue() {
      //防抖查询 单位时间内只执行最后一次查询操作 防止频繁请求接口
      // this的实例上赋值了一个timer的属性
      clearTimeout(this.timer) //清除之前的定时器
      this.timer = setTimeout(() => {
        this.queryParams.page = 1
        this.getEmployeeList() //重新获取员工列表数据
      }, 300)
    },
    //员工确认删除事件
    async confirmDel(id) {
      await DelEmployeeData(id) //删除员工数据
      if (this.employeeList.length === 1 && this.queryParams.page > 1) {
        //如果当前页只有一条数据 且 当前不是第一页 则回到上一页 重新获取列表数据
        this.queryParams.page--
      }
      this.getEmployeeList() //重新获取员工列表数据
      this.$message.success('删除成功!')
    },
    //添加员工按钮事件
    addEmployeeBtn() {
      this.$router.push('/employee/detail')
    },
    //分配角色按钮事件
    async btnRole(id) {
      //获取所有角色列表数据 赋值给roleList
      this.roleList = await getEnableRoleList()
      // 记录当前点击的id 因为后边 确定取消要存取给对应的用户
      this.currentUserId = id
      //获取当前用户拥有角色的id列表 赋值给roleIds双向绑定数据
      const { roleIds } = await getEmployeeDetailData(id)

      this.roleIds = roleIds
      this.showRoleDialog = true // 调整顺序
    },
    //角色对话框保存按钮事件
    async btnRoleOk() {
      await assignRole({ id: this.currentUserId, roleIds: this.roleIds })
      this.$message.success('分配角色成功!')
      this.showRoleDialog = false
    },
    //Excel导出员工信息事件
    async exportEmployee() {
      const result = await exportEmployee() // 导出所有的员工接口
      // console.log(result) // 使用一个npm包 直接将blob文件下载到本地 file-saver
      // FileSaver.saveAs(blob对象,文件名称)
      FileSaver.saveAs(result, '员工信息表.xlsx') // 下载文件
    }
  },
  computed: {}
}
</script>
<style scoped lang="scss">
.app-container {
  background: #fff;
  display: flex;
  // flex: 1;
  .left-container {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right-container {
    flex: 1;
    padding: 20px;
    .operate-tools {
      margin: 10px;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      background: pink;
      border-radius: 50%;
      font-size: 15px;
      display: inline-block;
    }
  }
}
</style>
